<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		s<style type="text/css">
			span{
				color: red;
			}
		</style>
		<script type="text/javascript">
			function getData1(){
				let xhr=new XMLHttpRequest
				xhr.open("GET","person1.xml",true)
				xhr.send()
				xhr.onreadystatechange = function(){
					if(xhr.readyState==4 && xhr.status==200){
						let data = xhr.responseXML
						let title = data.getElementsByTagName('title')[0].innerHTML
						let name = data.getElementsByTagName('name')[0].innerHTML
						let tag = data.getElementsByTagName('tag')[0].innerHTML
						let achievement = data.getElementsByTagName('achievement')[0].innerHTML
						let describe = data.getElementsByTagName('describe')[0].innerHTML
						document.getElementById("1").innerHTML = title
						document.getElementById("2").innerHTML = name
						document.getElementById("3").innerHTML = tag
						document.getElementById("4").innerHTML = achievement
						document.getElementById("5").innerHTML = describe
					}
				}
			}
			function getData2(){
				//1.创建核心对象(固定的)
				let xhr = new XMLHttpRequest()
				//2.创建请求
				xhr.open("GET","person2.xml",true)
				//3.发送请求(固定的)
				xhr.send()
				//4.接收,解析,显示数据
				xhr.onreadystatechange = function(){
					if(xhr.readyState==4 && xhr.status==200){
						let data = xhr.responseXML
						let stus = data.getElementsByTagName("person")
						console.log(data)
						document.getElementById("6").innerHTML = stus[0].getAttribute("title")
						document.getElementById("7").innerHTML = stus[0].getAttribute("name")
						document.getElementById("8").innerHTML = stus[0].getAttribute("tag")
						document.getElementById("9").innerHTML = stus[0].getAttribute("achievement")
						document.getElementById("10").innerHTML = stus[0].getAttribute("describe")
					}
				}
			}
		</script>
	</head>
	<body>
		<h1>点击按钮请求XML数据
			<h2>pers1.xml的XML文件信息如下：</h2><br>
				标题：<span id="1"></span><br>
				姓名：<span id="2"></span><br>
				头衔：<span id="3"></span><br>
				成就：<span id="4"></span><br>
				简述：<span id="5"></span><br>
		</h1>
		<button type="button" onclick="getData1()">读取XML文本内容</button>
		<hr >
		<h1>点击按钮请求XML数据
			<h2>pers1.xml的XML文件信息如下：</h2><br>
				标题：<span id="6"></span><br>
				姓名：<span id="7"></span><br>
				头衔：<span id="8"></span><br>
				成就：<span id="9"></span><br>
				简述：<span id="10"></span><br>
		</h1>
		<button type="button" onclick="getData2()">读取XML属性内容</button>
	</body>
</html>
